<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>表单输入的绑定</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- textarea -->
        <p>msg: {{msg}}</p>
        <textarea v-model="msg"></textarea>
        <hr>

        <!-- checkbox -->
        <input type="checkbox" id="cb" v-model="checked">
        <label for="cb">{{checked}}</label>
        <hr>

        <!-- 复选框 -->
        <div>
            <input type="checkbox" id="cb1" value="jack" v-model="stars">
            <label for="cb1">Jack</label>

            <input type="checkbox" id="cb2" value="john" v-model="stars">
            <label for="cb2">John</label>

            <input type="checkbox" id="cb3" value="mike" v-model="stars">
            <label for="cb3">Mike</label>
            <br>

            <span>stars: {{stars}}</span>
        </div>
        <hr>

        <!-- 单选按钮组 -->
        <div>
            <input type="radio" id="rd1" value="1" v-model="picked">
            <label for="rd1">1</label>

            <input type="radio" id="rd2" value="2" v-model="picked">
            <label for="rd2">2</label>

            <input type="radio" id="rd3" value="3" v-model="picked">
            <label for="rd3">3</label>
            <br>

            <span>picked: {{picked}}</span>
        </div>
        <hr>

        <!-- 下拉菜单 -->
        <div>
            <select v-model="selected">
                <option v-for="op in options" :value="op.value">{{op.text}}</option>
            </select>
            <span>selected: {{selected}}</span>
        </div>


    </div>

    <script>
        Vue.createApp({

            data(){
                return {
                    msg:"诽谤大帅锅的人去蹲大牢",
                    checked:false,
                    stars:["jack","john"],
                    picked:"2",
                    selected:"club",
                    options:[
                        {text:"黑桃",value:"spade"},
                        {text:"红桃",value:"heart"},
                        {text:"梅花",value:"club"},
                        {text:"方片",value:"diamond"},
                    ]
                }
            }

        }).mount('#app')

    </script>
</body>
</html>